<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" style="margin-left: 100px; margin-top: 20px" label-width="120px">
      <el-form-item label="分公司">
        <el-select v-model="form.branchId" v-if="isBranch" style="width: 180px" filterable>
          <el-option
            v-for="item in branchList"
            :label="item.branch_Name"
            :value="item.branch_Id">
          </el-option>
        </el-select>
        <el-input v-if="!isBranch" v-model="branchName" style="width: 180px" disabled></el-input>
      </el-form-item>
      <el-form-item label="输入栏回显词" required>
        <el-input v-model="form.wordName" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="跳转方式" required>
        <el-radio-group v-model="form.jumpType">
          <el-radio :label="1">搜索</el-radio>
          <el-radio :label="2">链接</el-radio>
          <el-radio :label="3">页面</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="jumpComment" label="请输入链接" v-if="form.jumpType === 2">
        <el-input v-model="form.jumpComment" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="PC页面" prop="pc" v-if="form.jumpType === 3">
        <el-select v-model="form.pc" clearable>
          <el-option
            v-for="item in pcList"
            :label="item.name"
            :value="item.markId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="惠配通" prop="hpt" v-if="form.jumpType === 3">
        <el-select v-model="form.hpt" clearable>
          <el-option
            v-for="item in hptList"
            :label="item.name"
            :value="item.markId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="惠付通" prop="hft" v-if="form.jumpType === 3">
        <el-select v-model="form.hft" clearable>
          <el-option
            v-for="item in hftList"
            :label="item.name"
            :value="item.markId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="edit">修 改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import { column, sslmrc } from '../../../config/proxy.js'
  import { mapState } from 'vuex'
  import mixins from '../../../components/mixins.vue'
  export default {
    mixins: [mixins],
    data () {
      return {
        pcList: [],
        hftList: [],
        hptList: [],
        form: {
          branchId: '',
          wordName: '',
          jumpType: 2,
          jumpComment: '',
          pc: '',
          hpt: '',
          hft: ''
        },
        rules: {
          jumpComment: [
            { required: true, message: '请输入链接', trigger: 'change' }
          ],
          pc: [
            { required: true, message: '请选择PC页面', trigger: 'change' }
          ],
          hpt: [
            { required: true, message: '请选择惠配通页面', trigger: 'change' }
          ],
          hft: [
            { required: true, message: '请选择惠付通页面', trigger: 'change' }
          ]
        }
      }
    },
    methods: {
      onSumbit () {
        sslmrc.query({branchId: this.branchId}, (res) => {
          console.log(res, 'wwwww')
          if (res.message === 'ok') {
            this.form.wordName = res.content.wordName
            this.form.jumpType = res.content.jumpType
            res.content.jumpType === 2 ? this.form.jumpComment = res.content.jumpComment : this.form.jumpComment = ''
            this.form.pc = res.content.pc
            this.form.hpt = res.content.hpt
            this.form.hft = res.content.hft
          } else {
//            this.$message({
//              showClose: true,
//              message: '修改失败',
//              type: 'error'
//            })
          }
        })
      },
      onSumbit1 (val) {
        if (isNaN(val)) {
          this.form.markId = ''
          this.$message({
            showClose: true,
            message: '请输入纯数字值',
            type: 'error'
          })
          return false
        }
      },
      edit () {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            sslmrc.edit(this.form, res => {
              if (res.message === 'ok') {
                this.$message({
                  showClose: true,
                  message: '创建成功',
                  type: 'success'
                })
                this.$store.dispatch('delTab', {id: 'sslmrc'})
              } else {
                this.$message({
                  showClose: true,
                  message: res.message,
                  type: 'error'
                })
              }
            })
          }
        })
      }
    },
    computed: mapState({
      userId: function (state) {
        return state.user.info.user_id
      },
      userName: function (state) {
        return state.user.info.user_name
      },
      branchId: function (state) {
        return state.user.info.branchId
      },
      branchName: function (state) {
        return state.user.info.branchId === 1 ? '总公司' : state.user.info.branchName
      }
    }),
    created () {
      this.form.branchId = this.branchId
      this.onSumbit()
      column.content.view({cliendId: 1}, (res) => {
        this.pcList = res.content.pageInfo
      }) // pc
      column.content.view({cliendId: 2}, (res) => {
        this.hptList = res.content.pageInfo
      }) // 惠配通
      column.content.view({cliendId: 3}, (res) => {
        this.hftList = res.content.pageInfo
      }) // 惠付通
    }
  }
</script>
<style>
  @media screen and (min-width:1000px) {
    .supplier-form{
      max-width: 600px;
    }
  }
  .el-form--inline div {
    display: inline-block;
    /*float: left;*/
  }
  .el-dialog__body {
    padding-top: 0;
  }
  .shuoming {
    line-height: 2;
    font-size: 16px;
    font-weight: 700;
    color: #1f2d3d;
  }
</style>
